<!DOCTYPE html>
<html lang="en">
<head>
<title>BabyCare</title>
<!-- custom-theme -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //custom-theme -->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- stylesheet -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/chocolat.css"	type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- //stylesheet -->
<!-- online fonts-->
<link href="http://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i" rel="stylesheet">
<!-- //online fonts -->
<!-- font-awesome-icons -->
<link href="css/font-awesome.css" type="text/css" rel="stylesheet"> 
<!-- //font-awesome-icons -->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> 
<!-- header -->
<div class="header-w3layouts"> 
	<!-- Navigation -->

	<nav class="navbar navbar-default navbar-fixed-top">
		<div class="container">
			<div class="navbar-header page-scroll">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
					<span class="sr-only">Lorem</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<h1><a class="navbar-brand" href="index.html"><i class="fa fa-cubes" aria-hidden="true"></i>BabyCare</a></h1>
			</div> 
			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse navbar-ex1-collapse">
				<ul class="nav navbar-nav navbar-right">
					<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
					<li class="hidden"><a class="page-scroll" href="#page-top"></a></li>
					<li><a class="page-scroll scroll active" href="#home">主页</a></li>
					<li><a class="page-scroll scroll" href="#about">设计</a></li>
					<li><a class="page-scroll scroll" href="#port">展示</a></li>
					<li><a class="page-scroll scroll" href="#services">服务</a></li>
					<li><a class="page-scroll scroll" href="#team">下载</a></li>
					<li><a class="page-scroll scroll" href="#contact">联系我们</a></li>
				</ul>
			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container -->
	</nav>  
</div>	
<!-- //header -->
<div class="header jarallax" id="home">
		<div class="w3_banner">
		<div class="container">
			<div class="slider">
				<div class="callbacks_container">
				   <ul class="rslides callbacks callbacks1" id="slider4">
						<li>							
							<div class="banner_text_w3layouts">
								<div class="banner-text-w3l">
									<h4>BabyCare</h4>
									<h3>远程看照，环境检测</h3>
									<p>Remote care, Environmental detection</p>
								</div>	
							</div>	
							</li>
						<li>	
							<div class="banner_text_w3layouts">
								<div class="banner-text-w3l">
									<h4>BabyCare</h4>
									<h3>婴儿生态，全面记录</h3>
									<p>Baby Ecology, Comprehensive Record</p>
								</div>	
							</div>
						</li>
						<li>	
							<div class="banner_text_w3layouts">
								<div class="banner-text-w3l">
									<h4>BabyCare</h4>
									<h3>模式切换，扩展性强</h3>
									<p>Mode switching, Strong expansibility</p>
								</div>	
							</div>
						</li>
						
					</ul>
				</div>
			  <script src="js/responsiveslides.min.js"></script>
			  <script>
				// You can also use "$(window).load(function() {"
				$(function () {
				  // Slideshow 4
				  $("#slider4").responsiveSlides({
					auto: false,
					pager:true,
					nav:true,
					speed: 500,
					namespace: "callbacks",
					before: function () {
					  $('.events').append("<li>before event fired.</li>");
					},
					after: function () {
					  $('.events').append("<li>after event fired.</li>");
					}
				  });
			
				});
			 </script>
		   </div>
		</div>   
	</div>	
	</div>
<!-- //banner -->
<!-- agile-about -->
	<div class="jarallax agile-about w3ls-section" id="about">
		<div class="container">
			<div class="agile-about-grids">
				<div class="col-md-6 col-sm-6 agile-about-grid agile-about-grid1 ">
					<h2 class="h3-w3l"><span class="head-w3l">设</span>计Design</h2>
					<h4></h4>
					<p>BabyCare设计初衷，源于生活中带娃问题。在有婴儿的家庭中，家长有时不可避免的会有其他事情，无法保证能够实时在婴儿身边看护。经常会有将婴儿独自放在一旁，自己去做其他的事情，不能同时抽身照顾婴儿的情况出现。无法预知婴儿何时能够在熟睡中清醒，一直在旁边看着也费时费力，但是家长去忙或自己的工作或其他事情又不放心，很多婴儿的安全问题都是由于家长的这种小疏忽导致的，这一矛盾有待解决。不仅如此，由于婴儿对温湿度及光强的感知与成年人不同，家长凭着自己的感觉去判断婴儿的感受，有时是不准确的，可能不利于婴儿的健康成长。同时，在孩子不同的成长阶段也会面临不同的问题，比如：衣食住行各个方面遇到棘手的事情、在整个成长过程中缺乏完整的记录等等。
						为了解决这些痛点难题，我们为此开发了的BabyCare系统，实现了让家长在忙自己的事情的同时也可以远程照看自己的孩子，还可将婴儿远程托管给空闲的其他亲人看管，发生情况及时联系正忙的监护人。同时装置盒子BabyBox借助相关传感器定量分析，获取婴儿实时的环境数据，分析处理反馈给家长，让家长能够对环境进行处理。并在软件端构建婴儿成长系统，针对成长的不同阶段设置相应的功能，定制成长计划，利于婴儿的健康成长。并且配有婴儿成长记录功能，可以通过照片、文字等多重记录方式记录整个成长过程，提升家庭幸福感。由于我们装置还具有很强的扩展能力，同时可对软件模式进行切换，包括对独居的老人，病人等人群继续远程监控，并相应开发老人模式OlderBox，扩展方便老人，病人使用的一些功能。
					</p>
					<p>BabyCare was originally designed for the problem of dolls in life. In families with babies, parents sometimes inevitably have other things that do not guarantee real-time baby care. Often there are situations where babies are left alone, doing other things on their own, and not being able to take care of babies at the same time. It's hard to predict when a baby will wake up in a deep sleep, and it takes time and effort to keep looking around. But parents are not confident about their busy work or other things. Many infant safety problems are caused by parents'negligence. This contradiction needs to be solved. Not only that, because the infant's perception of temperature, humidity and light intensity is different from that of adults, it is sometimes inaccurate for parents to judge the infant's perception by their own perception, which may be detrimental to the healthy growth of infants. At the same time, children will face different problems in different stages of growth, such as: food, clothing, housing and transportation in all aspects of difficult things, lack of complete records in the whole process of growth and so on.

						In order to solve these problems, we developed a BabyCare system for this purpose, which enables parents to take care of their children remotely while busy with their own affairs, and can also take care of the baby remotely to other idle relatives, so as to contact the busy guardians in time when the situation occurs. At the same time, the device box BabyBox obtains real-time environmental data of babies by quantitative analysis of relevant sensors, and the analysis and processing are fed back to parents, so that parents can deal with the environment. At the software end, the infant growth system is constructed, and the corresponding functions are set for different stages of growth, and the growth plan is customized, which is conducive to the healthy growth of infants. It also has the function of baby growth record, which can record the whole growth process through multiple recording methods such as photographs, words and so on, so as to enhance family happiness. Because our device also has a strong ability to expand, and can switch the software mode, including the elderly living alone, patients and other groups continue to monitor remotely, and develop OlderBox for the elderly mode accordingly, expand some functions that are convenient for the elderly and patients to use.</p>
				</div>

				<div class="col-md-6 col-sm-6 agile-about-grid agile-about-grid2 ">
				</div>
				<div class="clearfix"></div>
			</div>

			<div class="about-info-grids">
				<div class="col-md-4 col-sm-4 about-info about-info1">
					<i class="fa fa-info-circle agile-sicon" aria-hidden="true"></i>
					<h4>设计理念<span class="head-w3l"> ？</span></h4>
					<div class="h4-underline"></div>
					<p>“BabyCare”项目：在有婴儿的家庭中，家长有时不可避免的会有其他事情，无法保证能够实时在婴儿身边看护。经常会有将婴儿独自放在一旁，自己去做其他的事情，不能同时抽身照顾婴儿的情况出现。无法预知婴儿何时能够在熟睡中清醒，一直在旁边看着也费时费力，但是家长去忙或自己的工作或其他事情又不放心，很多婴儿的安全问题都是由于家长的这种小疏忽导致的，这一矛盾有待解决。不仅如此，由于婴儿对温湿度及光强的感知与成年人不同，家长凭着自己的感觉去判断婴儿的感受，有时是不准确的，可能不利于婴儿的健康成长。同时，在孩子不同的成长阶段也会面临不同的问题，比如：衣食住行各个方面遇到棘手的事情、在整个成长过程中缺乏完整的记录等等。</p>
					<p>为了解决这些痛点难题，我们为此开发了的BabyCare系统，实现了让家长在忙自己的事情的同时也可以远程照看自己的孩子，还可将婴儿远程托管给空闲的其他亲人看管，发生情况及时联系正忙的监护人。同时装置盒子BabyBox借助相关传感器定量分析，获取婴儿实时的环境数据，分析处理反馈给家长，让家长能够对环境进行处理。并在软件端构建婴儿成长系统，针对成长的不同阶段设置相应的功能，定制成长计划，利于婴儿的健康成长。并且配有婴儿成长记录功能，可以通过照片、文字等多重记录方式记录整个成长过程，提升家庭幸福感。由于我们装置还具有很强的扩展能力，同时可对软件模式进行切换，包括对独居的老人，病人等人群继续远程监控，并相应开发老人模式OlderBox，扩展方便老人，病人使用的一些功能。</p>

					</div>
				<div class="col-md-4 col-sm-4 about-info about-info2">
					<i class="fa fa-question-circle agile-sicon" aria-hidden="true"></i>
					<h4>原理介绍<span class="head-w3l"> ？</span></h4>
					<div class="h4-underline"></div>
					<p>硬件原理</p>
					<p><p>1.	对于整体架构，我们硬件主控制由Arduino单片机控制，通过数字和模拟I/O口连接相关传感器并控制相应模块，实现数据获取并上传服务器。这里采用轻量、简单、开放、易于实现的MQTT协议（即消息队列遥测传输协议）实时传送数据，并在软件端基于Android构建软件产品。
					2.	摄像头实时数据监控：通过摄像头获取视频图像数据，通过Http协议传输，通过服务器中继，再下行数据到手机端，利用安卓组件WebView展示。同时设置输入框，可以输入服务器提供的网络地址访问摄像头页面，供其他远方亲人托管看照，达到远程实时看照的功能。
					3.	针对熟睡的婴儿，我们设置麦克风声音传感和振动检测传感，检测婴儿清醒或是哭闹的状态，当检测到哭声和振动时，单片机的I/O口检测到脉冲信号，捕获后上传服务器处理下行到手机端展示并提醒家长。其中声音数据通过数值变换公式转化为哭声指数，振动检测脉冲信号进行模拟信号虚拟调制将其在时域上延展化转化为方波信号，具体说明在软件中配有介绍说明。
					4.	产品BabyBox可以获取婴儿环境的物理信息，主要借助温湿度传感器和光敏传感器以及红外人体检测等传感器。将这些数据量化处理经过MQTT协议上传下达到手机端展示。红外检测会检测其他位置人体或生物体靠近，通过脉冲信号转化警报。温湿度传达温湿度数据，并在超出温度设定阈值的范围时提示强提醒，通过红外控制室内空调等设备实现恒温。同时光敏检测光强，防止光线过强损伤婴儿眼睛。
					5.	产品外形借助SolidWorks等3D建模软件构建模型，通过3D打印制作，并可通过自己手工DIY设计或直接设计一些固定的产品外形，同时可增加挂钩，加持安装在摇床或其他家具上。
				</p>
					<p>软件原理</p>
					<p>1.	软件实现基于安卓实现，适用于市场所有主流安卓手机。通过Android Studio实现软件端的开发布局。
						2.	软件端通过Json封装数据存储设置，展示在页面相应的位置，并设置定时刷新页面实现实时展示更新新的数据流。并在内部通过逻辑分析数据反馈建议和提示。
						3.	视频展示页面通过WebView组件展示网页端视频流数据，并能够远程访问URL网址获取视频信息，实时展示硬件端视频信息。
						4.	通过Tablayout组件扩充软件内容，构建软件成长生态界面和个人主页；在实现基本软件的登录注册等功能外实现各种有利于婴儿安全与成长的功能。
						5.	通过容器装载源提供各种婴儿便携成长功能，即构建婴儿生态基本模型。
						6.	同时调度手机震动传感器开发紧急联系功能，相应通过容器装载老人模式各种功能，方便老人使用。
					</p>
					</div>
				<div class="col-md-4 col-sm-4 about-info about-info3">
					<i class="fa fa-registered agile-sicon" aria-hidden="true"></i>
					<h4>特色分析<span class="head-w3l"> ？</span></h4>
					<div class="h4-underline"></div>
					<p>1.	该产品克服了由于带娃看管使家人时间被耗费的问题，实现了远程化看管婴儿，并且能够托管看照，让更多的亲人同时帮忙看管，使带娃更加便携，分担个人带娃的负担。</p>
					<p>2.	在产品功能上，我们的产品通过获取传感器的数据，将婴儿的状态实时反馈给监护人，让监护人能够实时确认婴儿的状态，同时，当婴儿有哭闹等突发情况时，我们就会给监护人的手机进行响铃和震动提醒，让家长可以通过摄像头实时看到婴儿哭闹的原因。如果情况不是很严重，则可以通过手机播放轻柔的音乐让婴儿停止哭闹，如果情况很紧急，家长就可以选择直接去婴儿的房间查看哭闹原因并照顾婴儿。</p>
					<p>3.	在数据通信上，选择了低能耗的MQTT协议进行传输，降低了服务器压力的同时，也延长了本产品电池的使用时间。</p>
					<p>4.	在婴儿监护软件上，目前的软件大部分都是需要手动设置婴儿的相关信息，并且，大部分的软件都是以类似于一种妈妈对婴儿看护的心得交流体验社区的形式呈现，在对婴儿的护理上并没有什么实质性的帮助。</p>
					<p>5.	本产品同时在软件端构建了整个婴儿成长的生态，根据婴儿成长各个阶段都提供相应功能和记录，对婴儿的整个成长的过程进行科学的分析，定制自己宝宝的成长计划，从衣食住行多个方面解决成长中的繁琐难题，让孩子健康成长，快乐成长。
					</p>
					<p>6.	产品在硬件和应用场景上扩展性强，可以在一定基础上改装扩展新的功能。并且可以应用于各种场合，不仅是婴儿，可以应用于医院病人，身体不便的老人等等，不局限于婴儿的监测看护，使得产品的实用性更高。</p>
					<p>7.	开辟了一种新的商业模式，远程托管看照雇佣机制，能够收集人们的空闲时间进行监护。</p>
					<p>8.	多模式切换，可在婴儿与老人模式见切换，作为功能的扩展，更好的发挥BabyBox的功能与扩展性。</p>

					</div>
				<div class="clearfix"></div>
			</div>
			
		</div>
	</div>
	<!-- //agile-about -->
<div class="jarallax agileits-section w3ls-section text-center">
	<div class="container">
		<h3 class="h3-w3l"><span class="head-w3l">系</span>统<span class="head-w3l">详</span>细<span class="head-w3l">功</span>能</h3>
		<p>BabyCare1.0正式上线，让生命更美好！</p>
		<p>BabyCare 1.0 officially launched to make life better!</p>
		<div class="button">
			<a href="#" data-toggle="modal" data-target="#myModal">Get More<span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></a>
		</div>
	</div>
</div>	
	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" >
		<div class="modal-dialog">
			<!-- Modal content-->
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h3>功能简介</h3>
						<img src="images/a1.jpg" alt="construct" class="img-responsive"/>
						<span>1、BabyCare系统是一款基于端到端通信的远程监控的婴儿看照系统。特别是针对正在熟睡的婴儿，但是家长又忙于手边事不能一直陪在身旁的情况。并可以对婴儿清醒后及时做出安抚处理。同时是一款能够实时监控婴儿环境数据，将数据定量分析并处理反馈给监护人的监测提醒装置。</span>
						<span>2、该产品硬件BabyBox主要是通过摄像头记录婴儿当下的状态，并通过服务器将视频流数据转接到远程的手机APP端（基于Android），让家长可以远程在手机上实时观察婴儿的动静并及时处理突发情况，让家长更放心的忙于自己的手中活。同时，还可以将时间监控流的地址转发给其他远程空闲的监护人，帮助看照，甚至可以形成远程看找的产业，家长可以通过雇佣信任的远程监护者来帮助自己看照，并给予一定的报酬。</span>
						<span>3、针对熟睡的婴儿，特别是在摇床中的婴儿。我们的装置还利用麦克风声音传感器和振动检测传感器检测婴儿清醒后啼哭乱动的状态，或者婴儿睡眠环境下的能够对婴儿睡眠产生影响的强噪声，将采集到的数据上报手机端提醒家长婴儿可能已经清醒或环境发生了什么状况，并及时通过监控页面再次确认婴儿状态，让家长做出远程控制处理或及时返回婴儿环境安抚婴儿。同时，对于熟睡的婴儿清醒哭闹的场合，可以通过手机端远程播放一些哄睡音乐，远程暂时性安抚哭闹中的婴儿，缓解婴儿情绪。为监护人能够安心腾出自己的时间工作。</span>
						<span>4、该产品BabyBox内置多种传感器采集婴儿所处环境的物理信息，主要包括温度，湿度，光强等数据，防止温度变化，光强过强对婴儿产生损伤。我们在云端对这些数据进行分析，对婴儿环境做出评价并反馈建议显示在软件端。对于环境数据异常时，手机端将报警提醒家长进一步确认是否婴儿环境有突发情况并及时处理。并通过发射红外信号控制日常家电，例如打开空调降温等等。</span>
						<span>5、同时，该产品通过人体红外检测，能够检测到婴儿附近有无其他人靠近，传感器方向通过设计不会指向婴儿，不必担心检测到婴儿。当检测到陌生人或其他不明生物闯进居室靠近婴儿时，通过上传监测数据，并下行到手机App端提醒，让家长确认孩子环境的安全性。整个产品依附于WiFi模块传送数据，并通过指示灯展示婴儿当前大概率状态，红色代表婴儿哭闹，黄色代表婴儿清醒，绿色表示婴儿熟睡。</span>
						<span>6、BabyBox产品外形通过3D构建并打印，外观扩展性强，可以手工DIY装饰，也可以通过定制外观，同时，可以在BabyBox上安装挂钩，可以轻松夹持在各式各样的婴儿床上，或放置在婴儿附近位置。可设计贴切婴儿的外观模型。</span>
						<span>7、不仅如此，BabyCare系统在手机端App中构建婴儿生态，形成成长系统，可以定制成长计划。在这方面可以形成相应产业，入驻专家帮助用户定制计划，形成付费业务。同时，婴儿生态可以记录婴儿的全部的成长信息：可以照片记录，成长大事记录等等。并根据成长阶段，结合衣食住行，导出成长花费账单，身高体重分析，生活百科，婴儿食谱，哄睡音乐，出行推荐，喂奶提醒，垃圾分类，居家记录，医生问答，疫苗接种提醒等等功能。通过完善婴儿成长生态，360度兼顾婴儿成长问题，解决生活难题。便携生活，让孩子更健康更快乐的成长。</span>
						<span>8、该产品的应用场景可扩展，开发了模式切换的功能，也适用于医院病人，行动不便的孤寡老人的监护看照等场合，使得产品的适应性更强。在此基础上，开发了老人模式，针对用户远程看照老人更加便携，让看管老人不再是难题。同时针对老人开发了老人工具，包括老黄历，听书，新闻，老人保健饮食推荐，照明，发送定位，快捷消息，整点报时等。还未老人提供老人电话和紧急求助，可以提前输入家人手机号保存，紧急情况直接摇一摇手机就能联系家人。</span>
					</div>
				</div>
		</div>
	</div>
	<!-- //Modal -->
<!-- Portfolio -->
	<div class="jarallax w3portfolioaits w3ls-section" id="port">
		<div class="container">
			<h3 class="h3-w3l">展<span class="head-w3l">示</span></h3>
			<div class="w3portfolioaits-items">
				<div class="col-md-4 w3portfolioaits-item w3portfolioaits-item-1">
					<a class="example-image-link" href="images/g1.jpg" data-lightbox="example-set" data-title="">
						<div class="agileits-grid">
							<figure class="effect-apollo">
								<img src="images/g1.jpg" alt="Asset"/>
									<figcaption></figcaption>
							</figure>
						</div>
					</a>
				</div>
				<div class="col-md-4 w3portfolioaits-item w3portfolioaits-item-2">
					<a class="example-image-link" href="images/g2.jpg" data-lightbox="example-set" data-title="">
						<div class="agileits-grid">
							<figure class="effect-apollo">
								<img src="images/g2.jpg" alt="Asset"/>
									<figcaption></figcaption>
							</figure>
						</div>
					</a>
				</div>
				<div class="col-md-4 w3portfolioaits-item w3portfolioaits-item-3">
					<a class="example-image-link" href="images/g3.jpg" data-lightbox="example-set" data-title="">
						<div class="agileits-grid">
							<figure class="effect-apollo">
								<img src="images/g3.jpg" alt="Asset"/>
									<figcaption></figcaption>
							</figure>
						</div>
					</a>
				</div>
				<div class="col-md-4 w3portfolioaits-item w3portfolioaits-item-4">
					<a class="example-image-link" href="images/g4.jpg" data-lightbox="example-set" data-title="">
						<div class="agileits-grid">
							<figure class="effect-apollo">
								<img src="images/g4.jpg" alt="Asset"/>
									<figcaption></figcaption>
							</figure>
						</div>
					</a>
				</div>
				<div class="col-md-4 w3portfolioaits-item w3portfolioaits-item-5">
					<a class="example-image-link" href="images/g5.jpg" data-lightbox="example-set" data-title="">
						<div class="agileits-grid">
							<figure class="effect-apollo">
								<img src="images/g5.jpg" alt="Asset"/>
									<figcaption></figcaption>
							</figure>
						</div>
					</a>
				</div>
				<div class="col-md-4 w3portfolioaits-item w3portfolioaits-item-6">
					<a class="example-image-link" href="images/g6.jpg" data-lightbox="example-set" data-title="">
						<div class="agileits-grid">
							<figure class="effect-apollo">
								<img src="images/g6.jpg" alt="Asset"/>
									<figcaption></figcaption>
							</figure>
						</div>
					</a>
				</div>
				<div class="col-md-4 w3portfolioaits-item w3portfolioaits-item-7">
					<a class="example-image-link" href="images/g7.jpg" data-lightbox="example-set" data-title="">
						<div class="agileits-grid">
							<figure class="effect-apollo">
								<img src="images/g7.jpg" alt="Asset"/>
									<figcaption></figcaption>
							</figure>
						</div>
					</a>
				</div>
				<div class="col-md-4 w3portfolioaits-item w3portfolioaits-item-8">
					<a class="example-image-link" href="images/g8.jpg" data-lightbox="example-set" data-title="">
						<div class="agileits-grid">
							<figure class="effect-apollo">
								<img src="images/g8.jpg" alt="Asset"/>
									<figcaption></figcaption>
							</figure>
						</div>
					</a>
				</div>
				<div class="col-md-4 w3portfolioaits-item w3portfolioaits-item-9">
					<a class="example-image-link" href="images/g9.jpg" data-lightbox="example-set" data-title="">
						<div class="agileits-grid">
							<figure class="effect-apollo">
								<img src="images/g9.jpg" alt="Asset"/>
									<figcaption></figcaption>
							</figure>
						</div>
					</a>
				</div>
				<div class="clearfix"></div>
			</div>

		</div>
	</div>
	<!-- //Portfolio -->
<!-- services -->
<div class="jarallax w3ls-services w3ls-section" id="services">
	<div class="container">
		<h3 class="h3-w3l"><span class="head-w3l">服</span>务</h3>
		<div class="grid">
			<figure class="col-md-3 col-xs-6 w3l-service-hover">
				<img src="images/s2.jpg" alt="t1"/>
				<figcaption>
					<h4>数据页面</h4>
					<p>环境数据检测展示页</p>
				</figcaption>			
			</figure>
			<figure class="col-md-3 col-xs-6  w3l-service-hover s2">
				<img src="images/s3.jpg" alt="t2"/>
				<figcaption>
					<h4>生态页面</h4>
					<p>定制成长计划以及各种生活工具</p>
				</figcaption>			
			</figure>
			<figure class="col-md-3 col-xs-6 w3l-service-hover s3">
				<img src="images/s4.jpg" alt="t1"/>
				<figcaption>
					<h4>个人页面</h4>
					<p>个人主页，详细设置等等</p>
				</figcaption>			
			</figure>
			<figure class="col-md-3 col-xs-6 w3l-service-hover s4">
				<img src="images/s5.jpg" alt="t3"/>
				<figcaption>
					<h4>老人模式</h4>
					<p>提供各种小道具方便老人使用，扩展性增强</p>
				</figcaption>			
			</figure>
		</div>
			
	</div>
</div>	
<!-- //services -->	
<!-- team -->	
<div class="jarallax agileits-team w3ls-section" id="team">
	<div class="container">
		<h3 class="h3-w3l">下<span class="head-w3l">载Download</span></h3>
			<div class="carousel" data-ride="carousel" id="quote-carousel">
				<!-- Bottom Carousel Indicators -->
				<ol class="carousel-indicators">
					<li data-target="#quote-carousel" data-slide-to="0" class="active"><img class="img-responsive " src="images/t4.png" alt="">
					</li>
					<li data-target="#quote-carousel" data-slide-to="1"><img class="img-responsive" src="images/t5.png" alt="">
					</li>
					<li data-target="#quote-carousel" data-slide-to="2"><img class="img-responsive" src="images/t6.png" alt="">
					</li>
				</ol>

				<!-- Carousel Slides / Quotes -->
				<div class="carousel-inner">
					<!-- Quote 1 -->
					<div class="item active">
						<blockquote>
							<div class="row">
								<div class="col-sm-8 col-sm-offset-2">
									<p>BabyCare1.0版本下载，让生活更美丽！</p>
									<h5 class="testi-title">点击</h5><span class="test-info">下载</span>
								</div>
							</div>
						</blockquote>
					</div>
					<!-- Quote 2 -->
					<div class="item">
						<blockquote>
							<div class="row">
								<div class="col-sm-8 col-sm-offset-2">
									<p>BabyCare1.0版本下载，让生活更美丽！</p>
									<h5 class="testi-title">点击</h5><span class="test-info">下载</span>
								</div>
							</div>
						</blockquote>
					</div>
					<!-- Quote 3 -->
					<div class="item">
						<blockquote>
							<div class="row">
								<div class="col-sm-8 col-sm-offset-2">
									<p>BabyCare1.0版本下载，让生活更美丽！</p>
									<h5 class="testi-title">点击</h5><span class="test-info">下载</span>
								</div>
							</div>
						</blockquote>
					</div>
				</div>
		    </div>
	</div>
</div>
<!-- team -->					
<!-- contact --> 
<div class="jarallax contact-w3-agileits w3ls-section" id="contact">
	<div class="container">
		<div class="contact-main">
			<div class="col-md-6 col-sm-6 col-xs-6 contact-left-w3ls">
				<h3 class="h3-w3l"> <span class="head-w3l">联系</span>我们 <span class="head-w3l"></span></h3>
				<div class="mail contact-grid-agileinfo c1">
					<div class="contact-icon-wthree">
						<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
					</div>
					<div class="contact-text-agileinfo">
						<h4>Mail us</h4>
						<p><a href="mailto:info@example.com">jackcc0701@163.com</a></p>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="call contact-grid-agileinfo c2">
					<div class="contact-icon-wthree">
						<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
					</div>
					<div class="contact-text-agileinfo">
						<h4>Call us</h4>
						<p>+18810257998</p>
					</div>				
					<div class="clearfix"></div>
				</div>	
				<div class="visit contact-grid-agileinfo">
					<div class="contact-icon-wthree">
						<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
					</div>
					<div class="contact-text-agileinfo">
						<h4>Visit us</h4>
						<p>北京市海淀区</p><p>学院路30号北京科技大学</p>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="col-md-6 col-sm-6 col-xs-6 contact-right-w3l">
				<h3 class="h3-w3l"> <span class="head-w3l">o</span>n the  <span class="head-w3l">ma</span>p</h3>
				<iframe src="" allowfullscreen></iframe>
			</div>
			<div class="clearfix"></div>			
		</div>			
	</div>
</div>
<div class="contact-form-w3l  w3ls-section">
	<div class="container">
		<h3 class="h3-w3l"><span class="head-w3l">wr</span>ite a <span class="head-w3l">mess</span>age</h3>
		<form action="#" method="post">
			<div class="col-sm-6">
				<input type="text" class="name" name="name" placeholder="First Name" required="">
				<input type="text" class="name" name="name" placeholder="Phone" required="">
				<input type="email" class="name" name="name" placeholder="Email" required="">
			</div>	
			<div class="col-sm-6">
				<textarea placeholder="Your Message" required></textarea>
				<input type="submit" value="submit">
			</div>
		</form>
	</div>
</div>	
<!-- //contact --> 		
<!-- footer-->
<div class="agile-w3layouts-footer text-center">
	<div class="social">
		<h6><span class="head-w3l">fo</span>llow <span class="head-w3l">us</span></h6>
		<ul class="social-icons agileinfo">
			<li><a href="#" ><i class="fa icon1 fa-facebook-square" aria-hidden="true"></i></a></li>
			<li><a href="#"><i class="fa icon2 fa-twitter-square" aria-hidden="true"></i></a></li>
			<li><a href="#" ><i class="fa icon3 fa-google-plus-square" aria-hidden="true"></i></a></li>
			<li><a href="#"><i class="fa icon4 fa-instagram" aria-hidden="true"></i></a></li>
			<li><a href="#"><i class="fa icon5 fa-youtube-square" aria-hidden="true"></i></a></li>
		</ul>
	</div>	
	<p>版权所有 &copy; 2019.团队名称保留所有权利 <a href="#" target="_blank" title="BabyCare">BabyCare</a> </p>
</div>	
<!-- //footer -->
	<!-- Popup-Box-JavaScript -->
			<script src="js/jquery.chocolat.js"></script>
			<script type="text/javascript">
				$(function() {
					$('.w3portfolioaits-item a').Chocolat();
				});
		</script>
		<!-- //Popup-Box-JavaScript -->
		<script src="js/jarallax.js"></script>
		<script src="js/SmoothScroll.min.js"></script>
		<script type="text/javascript">
			/* init Jarallax */
			$('.jarallax').jarallax({
				speed: 0.5,
				imgWidth: 1366,
				imgHeight: 768
			})
		</script>
		<!-- here starts scrolling icon -->
		<script type="text/javascript">
			$(document).ready(function() {
				/*
					var defaults = {
					containerID: 'toTop', // fading element id
					containerHoverID: 'toTopHover', // fading element hover id
					scrollSpeed: 1200,
					easingType: 'linear' 
					};
				*/
										
				$().UItoTop({ easingType: 'easeOutQuart' });
									
				});
		</script>
		
		<!-- start-smooth-scrolling -->
		<script type="text/javascript" src="js/move-top.js"></script>
		<script type="text/javascript" src="js/easing.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
		</script>
		<!-- /ends-smooth-scrolling -->
	<!-- //here ends scrolling icon -->


		
</body>
</html>
